import React ,{useEffect} from 'react'
import { Form, Input, Button, Radio, Space, NoticeBar } from 'react-vant'
import {useDispatch,useSelector} from "react-redux"
import {user_login,user_register} from "@/api/index"
import {RootDispatch,anyAction,RootState} from "@/untils/index"
// import withRouter from "@/utils/withRouter"

type Props = {
    router:anyAction
}

interface values{
    [x:string]:string
}

const Login :React.FC<Props> = ({router})=> {
    const dispatch:RootDispatch = useDispatch()
    const code = useSelector((state:RootState)=>state.code)
    const [form] = Form.useForm()

    useEffect(()=>{
        console.log("code值改变了");
        if (code === 200) {
            router.navigate("/")
        }
        
    },[code])
    const onFinish = (values:values) =>{
        console.log(values);
        if (values.type === "login") { // 登陆
            // console.log("login");
            dispatch(user_login(values))
            
            // router.navigate("/")
        }else if(values.type === "register") { //注册
            console.log("register");
            dispatch(user_register(values))
        }
    }
    return (
        <div>
            <Form
             
                form={form}
                initialValues={{
                    type: 'login',
                    account: '18888888888',
                }}
                // initialValues={{
                //     type: 'login',
                // }}
                onFinish={onFinish}
                footer={<>
                    <Form.Subscribe to={['type', 'account']}>
                        {({ type, account }) => (
                            <NoticeBar>
                                你将使用 {type === 'login' ? '登陆' : '注册'}
                            </NoticeBar>
                        )}
                    </Form.Subscribe>
                    <div style={{ margin: '16px 16px 0' }}>
                        <Button round nativeType='submit' type='primary' block>
                            提交
                        </Button>
                    </div>
                </>} controlAlign={undefined}>
                <Form.Item name='type' label='登录方式' controlAlign={undefined}>
                    <Radio.Group defaultValue="1">
                        <Space>
                            <Radio name='login'>登陆</Radio>
                            <Radio name='register'>注册</Radio>
                        </Space>
                    </Radio.Group>
                </Form.Item>

                <Form.Subscribe to={['type']}>
                    {({ type }) => {
                    return (
                        <>
                        {type === 'login' && (
                            <>
                                <Form.Item name='username' label='用户名' controlAlign={undefined}>
                                    <Input placeholder='请输入用户名' />
                                </Form.Item>
                                <Form.Item name='password' label='密码' controlAlign={undefined}>
                                    <Input placeholder='请输入密码' />
                                </Form.Item>
                            </>
                        )}
                        {type === 'register' && (
                            <>
                                <Form.Item name='username' label='用户名' controlAlign={undefined}>
                                    <Input placeholder='请输入用户名' />
                                </Form.Item>
                                <Form.Item name='password' label='密码' controlAlign={undefined}>
                                    <Input placeholder='请输入密码' />
                                </Form.Item>
                            </>
                        )}
                        </>
                    )
                    }}
                </Form.Subscribe>
            </Form>
        </div>
    )
}

export default Login
